﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/FoodMaster.Master"
    Inherits="System.Web.Mvc.ViewPage<MBS_FoodBooking.Models.FoodMenu>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <% using (Ajax.BeginForm("AddtoCart", "FoodBooking", new AjaxOptions { UpdateTargetId = "shoppingCart" }))
       { %>
    <div style="float: left; width: 75%; height: 500px;">
        <table>
            <tr>
                <% foreach (var item in Model.MenuItemList)
                   { %>
                <td>
                    <% Html.RenderPartial("~/Views/Shared/Controls/FoodItemControl.ascx", item); %>
                </td>
                <% } %>
            </tr>
            <tr>
                <td align="center">
                    <button id="btnAdd" type="submit">
                        <img src="/Content/Images/AddtoCart.png" /></button>
                </td>
            </tr>
        </table>
    </div>
    <% } %>
    <div style="float: left; width: 23%; height: 500px;">
        <img src="../../Content/Images/shoppingcart-icon-red.png" style="float: left; padding: 2px 2px 2px 40px;
            width: 60px; height: 60px" />
        <img src="../../Content/Images/cart.png" style="float: left; padding-left: 20px
                width: 100px; height: 60px" />
        <div id="shoppingCart">
            <%if (Model.LstShoppingCart != null && Model.LstShoppingCart.LstShoppingCart.Count != 0)
              { %>
            <% Html.RenderPartial("~/Views/Shared/Controls/ShoppingCartControl.ascx", Model.LstShoppingCart); %>
            <%} %>
        </div>
    </div>
    <%--<div id="dialog2" class="window">
        So, with this <b>Simple Jquery Modal Window</b>, it can be in any shapes you want!
        Simple and Easy to modify : )
        <br />
        <br />
        <input type="button" value="Close it" class="close" />
    </div>
    <div id="mask">
    </div>
    --%>
    <script type="text/javascript">
        $(document).ready(function () {

                        
                //Get the screen height and width
                var maskHeight = $(document).height();
                var maskWidth = $(window).width();

                //Set heigth and width to mask to fill up the whole screen
                $('#mask').css({ 'width': maskWidth, 'height': maskHeight });

                //transition effect		
                $('#mask').fadeIn(1000);
                $('#mask').fadeTo("slow", 0.8);

                //Get the window height and width
                var winH = $(window).height();
                var winW = $(window).width();

                //Set the popup window to center
                $('#dialog2').css('top', winH / 2 - $(id).height() / 2);
                $('#dialog2').css('left', winW / 2 - $(id).width() / 2);

                //transition effect
                $('#dialog2').fadeIn(2000);

            });

            //if close button is clicked
            $('.window .close').click(function (e) {
                //Cancel the link behavior
                e.preventDefault();

                $('#mask').hide();
                $('.window').hide();
            });

            //if mask is clicked
            $('#mask').click(function () {
                $(this).hide();
                $('.window').hide();
            });

            $(window).resize(function () {

                var box = $('#boxes .window');

                //Get the screen height and width
                var maskHeight = $(document).height();
                var maskWidth = $(window).width();

                //Set height and width to mask to fill up the whole screen
                $('#mask').css({ 'width': maskWidth, 'height': maskHeight });

                //Get the window height and width
                var winH = $(window).height();
                var winW = $(window).width();

                //Set the popup window to center
                box.css('top', winH / 2 - box.height() / 2);
                box.css('left', winW / 2 - box.width() / 2);

            });

        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
</asp:Content>
